<template>
  <div>
    <el-dialog title="编辑角色" :visible.sync="dialogVisible" width="400px" :append-to-body="true" @close="closeEditDialog" :close-on-click-modal ="false">
      <el-form :model="editRowInfo" :rules="rulesUpdate" ref="refRoleUpdateForm" label-width="100px">
        <el-form-item size="small" label="角色名称" prop="name">
          <el-input clearable v-model="editRowInfo.name"></el-input>
        </el-form-item>
        <el-form-item size="small" label="角色描述">
          <el-input type="textarea" :rows="2" placeholder="请输入角色描述内容" v-model="editRowInfo.description" resize='none' :autosize="{ minRows: 2, maxRows: 5 }"></el-input>
        </el-form-item>
      </el-form>
      <!-- 权限分配 -->
      <span>权限分配</span>
        <!-- default-expand-all  是否默认展开所有节点 -->
      <el-tree ref="tree" show-checkbox highlight-current :data="treeData" node-key="id"
        :props="defaultProps" :default-checked-keys="defaultCheckedKeys">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" @click="editSubmit" v-preventReClick="1000" class="confirm-button">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updateRole } from "@/api/api";
export default {
  name: "editRole",
  props: ["editRowInfo", "defaultCheckedKeys", "treeData"],
  data() {
    return {
      dialogVisible: false,
      permissionIdArr: [], //权限数组------后
      // 对应treeDAta中的label和children
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 表单修改验证信息
      rulesUpdate: {
        name: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        /* description: [
            { required: true, message: "请输入角色描述", trigger: "blur" }
          ] */
      },
    };
  },
  methods: {
    // 确认修改角色
    editSubmit() {
      this.$refs.refRoleUpdateForm.validate(async (valid) => {
        if (!valid)
          return this.$modal.notifyWarning(
            "请检查您的角色名称或者角色描述是否输入错误"
          );
        this.permissionIdArr = [];
        this.permissionIdArr.push(
          ...this.$refs.tree.getCheckedKeys(),
          ...this.$refs.tree.getHalfCheckedKeys()
        );
        const res = await updateRole({
          name: this.editRowInfo.name,
          id: this.editRowInfo.id,
          description: this.editRowInfo.description,
          permissionId: this.permissionIdArr,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("修改角色成功");
        this.dialogVisible = false;
        this.$parent.RoleList();
      });
    },
    // 点击取消和关闭按钮
    closeEditDialog() {
      this.$refs.refRoleUpdateForm.resetFields();
      this.$refs.tree.setCheckedKeys([]);
      this.dialogVisible = false;
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
@import url("../../common.less");
// 树形
.el-tree {
  background: @primaryTree;
}
// 树形控件字体颜色
::v-deep .el-tree-node__content {
  color: @primaryTree2 !important;
}
// 树形控件选中一行的字体颜色
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  color: #000 !important ;
}
// 节点hover后的背景样式
::v-deep .el-tree-node__content {
  &:hover {
    // background: red !important;
    color: #000 !important;
  }
}
</style>